<template>
    <div id="person">
        <mt-header fixed title="我的"></mt-header>
        <div class="person-set">

            <div class="person-img">
                <img v-if="hImg" :src="hImg">
                <svg v-else class="icon" aria-hidden="true">
                    <use xlink:href="#icon-denglu"></use>
                </svg>
            </div>
            <router-link :to="initRouter" class="person-info">
                <p>{{initName}}</p>
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="isLogin?'#icon-user01_sel':'#icon-fangxiang1'"></use>
                    </svg>
                </span>
            </router-link>
        </div>
        <div class="person-list">
            <router-link to="/cash" class="cash">
                <p class="mon">00.00 <span>元</span></p>
                <p class="text">账户余额</p>
            </router-link>
           
            <router-link to="/coupon" class="coupon">
                <p class="mon">{{myCouponMenuLen}} <span>张</span></p>
                <p class="text">我的优惠劵</p>
            </router-link>
            <router-link :to="{name: 'order', params:{orderState: 1}}" class="alreOrder">
                <p class="mon">{{alerOrder.length}} <span>单</span></p>
                <p class="text">已完成订单</p>
            </router-link>
        </div>

        <div class="person-list-option" ref="personOption" v-getH="310">
            <div>
                <div class="person-opation">
                    <!-- 订单 -->
                    <mt-cell
                        :title="item.title"
                        :to="item.link"
                        is-link
                        v-for="(item, index) in list"
                        :key="index">
                        <span class="icon">
                            <svg class="icon" aria-hidden="true">
                                <use :xlink:href="item.icon"></use>
                            </svg>
                        </span>
                    </mt-cell>
                    <!-- 我的商铺 -->
                    <mt-cell
                        title="我的商铺"
                        to="/setShop"
                        is-link
                        v-show="type === '商家'"
                    >
                        <span class="icon">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dianpu"></use>
                            </svg>
                        </span>
                    </mt-cell>
                </div>
                <div class="person-logout" v-show="hImg">
                    <mt-button type="danger" size="large" @click="goOut">退出登陆</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions} from 'vuex'
import { MessageBox} from 'mint-ui'
import Bscroll from 'better-scroll'
import axios from 'axios'
export default {
    data(){
        return {
            list: [
                {title: '我的订单', link: "/order/0", icon: '#icon-icon-'},
                {title: '积分商城', link: '/credit', icon: '#icon-weibiaoti-1'},
                {title: '我的会员', link: '/member', icon: '#icon-huiyuan'},
                {title: '服务中心', link: '/server', icon: '#icon-fuwu'}
            ],
            initName: '登陆',
            initRouter: 'login',
            myCouponMenuLen: 0,//优惠劵的长度 不包括删除的
        }
    },
    inject: ['reload'],
    computed:{
        ...mapState([
            'isLogin',
            'storeFlag',
            'uname',
            'hImg',
            'sname',
            'type',
            //我的优惠卷
            'myCouponMenu',
            'alerOrder',//已完成订单
        ])
    },

    created(){
        this.myCouponMenuLen = this.myCouponMenu.length
        //计算
        this.getCoupon({
            couponId: this.storeFlag + '-'
        }).then(myCouponMenu =>{
            
           this.setState({myCouponMenu})
        }, () =>{
            console.log('没有优惠劵')
        })
        
        
        //此时也是需要获取完成订单的长度
        axios({
                method: 'get',
                url:'http://localhost:3003/getOrder',
                params:{
                    orderGet: this.storeFlag + 'customer',
                    orderState: 1
                }
            }).then((res) =>{
                const {data, code} = res.data

                if(code === 1){
                    return this.setState({alerOrder: data})
                }

                this.setState({alerOrder: []})
            })


        
        this.$nextTick(() =>{
            this.personOptionScroll = new Bscroll(this.$refs.personOption, {click: true})
        })

        if(!this.isLogin) return 
        this.initName = this.uname
        this.initRouter = 'pmanger'
    },
    methods:{

        ...mapMutations([
            'setState',
            'logout'
        ]),
        ...mapActions([
            'getCoupon',
            'getMyOrder'
        ]),
        goOut(){
            this.logout({router: this.$router, reload: this.reload})
        }
    },

     //指令
    directives:{
        getH:{
            inserted: function (el, binding) {
                el.style.height = document.querySelector('html').clientHeight - binding.value + 'px'
            }
        }
    }

}
</script>

<style lang="less" scoped>
    #person{
        height: 100%;
        overflow: hidden;
        .person-set{
            margin-top:40px; 
            display: flex;
            height: 130px;
            background-color: #49CB5F;
            border-top: 2px solid #ccc;
            border-bottom: 1px solid #ccc;
            .person-img{
                flex: 1.3;
                text-align: center;
                border-right: 1px solid #0C806C;
                >img{
                    width: 80%;
                    height: 80px;
                    margin-top: 25px;
                    border-radius: 50%;
                }

                svg{
                    width: 80px;
                    height: 100%;
                }
            }
            .person-info{
                flex:3;
                line-height: 130px;
                text-align: center;
                font-size: 25px;
                > p{                    
                    display: inline;
                    color: #fff;
                }
                > span{
                   height: 100%;
                   float: right;
                   margin-right: 10px;
                   color: #fff;
                   > svg{
                       width: 60px;
                       height: 100%;
                   }
                }
            }
        }
        .person-list{
            display: flex;
            height: 80px;
            border-bottom: 1px solid #ccc;
            .coupon{
                border-right: 1px solid #ccc;
                border-left: 1px solid #ccc;
                .mon{
                    color: #19a15f;
                }
            }
            .alreOrder{
                .mon{
                    color: #ef4f4f;
                }
            }
            //余额
            > a{
                flex: 1;
                text-align: center;
                .mon{
                    font-size: 27px;
                    color: #ffcd42;
                    font-weight: 900;
                    margin: 5px 0;
                    span{
                        font-size: 12px;
                        color: #888;
                    }
                }
                .text{
                    font-size: 16px;
                    color: #666;
                }
            }
        }
        .person-logout{
            margin-top: 10px;
        }
        // 定义在公共样式里面了
        // .person-list-option{
        //     overflow: hidden;
        //     .person-opation{

        //         .icon{
        //             width: 50px;
        //             height: 35px;
        //             float: left;
        //             svg{
        //                 width: 100%;
        //             }
        //         }
        //     }
        // }
    }
</style>


